<template>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>折线图 Demo</span>
          </div>
          <div id="myChart1" class="chart-view"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>柱状图 Demo</span>
          </div>
          <div id="myChart2" class="chart-view"></div>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>饼图 Demo</span>
          </div>
          <div id="myChart3" class="chart-view"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>饼图 Demo</span>
          </div>
          <div id="myChart4" class="chart-view"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts';
  export default {
    name: 'zb-dailyCout',
    data () {
      return {}
    },
    mounted() {
      let myChart1 = echarts.init(document.getElementById('myChart1'))
      const option1 = {
        title: {
          text: '承兑汇票',
          show: true,
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          y: 'bottom',
          data: [
            '剩余期限：0-1个月（含）', '剩余期限：1-3个月（含）', '剩余期限：3-6个月（含）', '剩余期限：6-12个月（含）'
          ]
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['9月21日', '9月22日', '9月23日', '9月24日', '9月25日', '9月26日', '9月27日', '9月28日', '9月29日', '9月30日']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '剩余期限：0-1个月（含）',
          type: 'line',
          //stack: '总量',
          //itemStyle: {normal: {areaStyle: {type: 'default'}}},
          data: [80, 122, 101, 134, 90, 130, 110, 105, 92, 150]
        },
          {
            name: '剩余期限：1-3个月（含）',
            type: 'line',
            //stack: '总量',
            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [120, 82, 91, 84, 111, 138, 147, 97, 88, 123]
          },
          {
            name: '剩余期限：3-6个月（含）',
            type: 'line',
            //stack: '总量',
            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [40, 132, 221, 184, 205, 260, 290, 200, 150, 188]
          },
          {
            name: '剩余期限：6-12个月（含）',
            type: 'line',
            //stack: '总量',
            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [284, 243, 201, 144, 190, 130, 107, 185, 220, 294]
          }
        ]
      }
      myChart1.setOption(option1)
      let myChart2 = echarts.init(document.getElementById('myChart2'))
      const option2 = {
        title: {
          text: 'XX银行各项存款',
          subtext: 'XX bank',
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              show: true,
              readOnly: false,
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true,
            },
            saveAsImage: {
              show: true,
            }
          }
        },
        tooltip: {
          show:true,
          trigger: 'axis'
        },
        legend: {
          show:true,
          data: [
            '个人存款', '对公存款','',
            '比上日增量','比上月增量'
          ]
        },
        calculable: true,
        grid: {
          y: 70,
          y2: 30,
          x2: 20
        },
        xAxis: [{
          type: 'category',
          data: ['9月21日', '9月22日', '9月23日', '9月24日', '9月25日', '9月26日', '9月27日', '9月28日', '9月29日', '9月30日']
        },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: ['9月21日', '9月22日', '9月23日', '9月24日', '9月25日', '9月26日', '9月27日', '9月28日', '9月29日', '9月30日']
          }
        ],

        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value} 亿'
          }
        }],

        series: [{
          name: '个人存款',
          type: 'bar',
          itemStyle: {
            normal: {
              /*color: 'rgba(87,230,26,1)',*/
              label: {
                show: false,
              }
            }
          },
          data: [762, 1010, 918, 836, 698, 603, 604, 767, 936, 1390]
        },
          {
            name: '对公存款',
            type: 'bar',
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                /*color: 'rgba(87,230,26,0.3)',*/
                label: {
                  show: false,
                  formatter: function(p) {
                    return p.value > 0 ? (p.value + '\n') : '';
                  }
                }
              }
            },
            data: [1000, 1350, 1218, 1099, 925, 873, 864, 1015, 1336, 1890]
          },
          {
            name: '比上日增量',
            type: 'line',
            data: [862, 720, 880, 980, 800, 608, 757, 900, 1136, 1690]
          },
          {
            name: '比上月增量',
            type: 'line',
            data: [987, 1300, 1250, 1111, 1005, 893, 824, 985, 1226, 1790]
          }
        ]
      };
      myChart2.setOption(option2);
      let myChart3 = echarts.init(document.getElementById('myChart3'));
      const option3 = {
        title: {
          text: 'PIE CHART',
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },

        legend: {
          orient: 'vertical',
          right: '0',
          y: 'middle',
          itemWidth: 18,
          itemHeight: 18,
          formatter: function(name) {
            var oa = option3.series[0].data;
            for(var i = 0; i < oa.length; i++) {
              if(name == oa[i].name) {
                return '\t\t' + name + '\t\t' + oa[i].value;
              }
            }
          },
          data: ['no1', 'no2', 'no3', 'no4', 'no5', 'no6']
        },
        series: [{
          name: 'PIE CHART',
          type: 'pie',
          radius: ['60%', '80%'],
          center: ['30%', '50%'],
          color: ['#27c2c1', '#9ccb63', '#fcd85a', '#60c1de', '#0084c8', '#d8514b'],
          data: [{
            value: 365,
            name: 'no1'
          }, {
            value: 310,
            name: 'no2'
          }, {
            value: 234,
            name: 'no3'
          }, {
            value: 135,
            name: 'no4'
          }, {
            value: 94,
            name: 'no5'
          }, {
            value: 134,
            name: 'no6'
          }],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: true
            }
          }
        }]
      };
      myChart3.setOption(option3);
      let myChart4 = echarts.init(document.getElementById('myChart4'));
      const option4 = {
        title: {
          text: 'PIE CHART',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            data: [
              {value: 10, name: 'rose1'},
              {value: 5, name: 'rose2'},
              {value: 15, name: 'rose3'},
              {value: 25, name: 'rose4'},
              {value: 20, name: 'rose5'},
              {value: 35, name: 'rose6'},
              {value: 30, name: 'rose7'}
            ]
          }
        ]
      }
      myChart4.setOption(option4);
    }
  }
</script>
<style>
  .container .chart-view{
    width: 100%;
    min-height: 320px;
  }
</style>
